﻿@{
    Style.Require("NineSeas.CategoryMenu");
    var groupItemCount = Model.GroupItemCount ?? 11;
    Script.Require("NineSeas.PopupPanel");    
}
<div class="categoryMenu">
    <span class="button-open item-flow-left"><a href="javascript:;">@T("Categories") &#9660;</a></span>
    <div class="menu">
        <div class="callout"></div>
        <div style="clear: both;"></div>
        @{var i = 0; var closed = true;}
        @foreach (var category in Model.Categories)
        {
            if (i % groupItemCount == 0)
            {
                closed = false;
                @:<div class="group">
            } 
            <a class="category" href="@Url.Action("List", "BookView", new { @category = category.Slug })">
                @category.Name
            </a>
            if (i != 0 && i % groupItemCount == (groupItemCount - 1))
            {
                closed = true;
                @:</div>              
            }
            i++;
        }
        @if (!closed)
        {
            @:</div>
        } 
    </div>
</div>
@using (Script.Foot()) {
<script type="text/javascript">
//<![CDATA[
    $(function () {
        $.popupPanel(".categoryMenu .button-open", ".categoryMenu .menu");
    })
//]]>
</script>
}